<template>
  <div v-if="show" id="MY" :key="i">
    <van-pull-refresh style="height:100%; overflow: auto;" v-model="loading" @refresh="onRefresh" >
      <router-view></router-view>
    </van-pull-refresh>
    <nav v-show="showNav">
      <my-nav></my-nav>
    </nav>
  </div>
</template>
<script>
import MyNav from "@/components/Nav.vue";
import { PullRefresh } from "vant";
import {my} from "@/api/my"
export default {
  name: "App",
  components: { MyNav, [PullRefresh.name]: PullRefresh },
  computed: {
    showNav() {
      let path = this.$route.path;
      if (
        path == "/" ||
        path == "/shop" ||
        path == "/my" ||
        path == "/message"
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      i:0,
    };
  },
  methods: {
    onRefresh() {
      // 下拉刷新
      this.axios({
        url: "http://127.0.0.1:8081/home",
        method: "GET",
      })
        .then((res) => {
          // 获取数据成功 通过v-if来重新渲染页面
          this.loading = false
          // 通过控制 key 值让页面重新渲染
          this.i++
          this.$store.dispatch({
            type: "getNote",
            data: res.data,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    // 获取数据库笔记数据
    this.axios({
      url: "http://127.0.0.1:8081/home",
      method: "GET",
    })
      .then((res) => {
        // 获取数据成功 通过v-if来重新渲染页面
        this.show = true;
        this.$store.dispatch({
          type: "getNote",
          data: res.data,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style  lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-size: 12px;
  // 禁止网页选择文字
  user-select: none;
  // 火狐浏览器 隐藏滚动条
  scrollbar-width: none;
}
#MY,
#app {
  width: 100%;
  height: 100%;
}
// 谷歌pc端 隐藏滚动条
::-webkit-scrollbar {
  width: 0;
}

// 谷歌 移动端 需要设置html,body的width和height
html,
body {
  overflow: scroll;
}

body::-webkit-scrollbar {
  width: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  background: rgb(255, 255, 255);

  nav {
    position: fixed;
    height: 44px;
    bottom: 0;
    left: 0;
  }
}
</style>
